<template>
    <div class="comment">
        <div class="comment-title f f-ac">
            发布评论<span>（文明上网理性发言，请遵守评论服务协议）</span>
        </div>
        <div class="mt-10">
            <el-input type="textarea" :rows="10" placeholder="文明上网理性发言，请遵守评论服务协议" v-model="content" maxlength="100"
                show-word-limit />
        </div>
        <div class="f f-ac f-je mt-30">
            <My-btn label="发布" :bg-color="content ? 'dark-blue' : 'dark-gray'" :read-only="!content" width="177"
                height="39" @click="handleSubmit" />
        </div>
        <div class="comment-box mt-20 mb-70" id="comment">
            <div class="comment-item mb-30" v-for="(i, k) in commentList" :key="k" :id="'comment' + i.id">
                <div class="comment-top f f-ac">
                    <!-- <img :src="userForm.avatar" class="from-left" /> -->
                    <div v-if="!i.user_avatar">
                        <img :src="avatar" class="avatar" />
                    </div>
                    <div v-else>
                        <img :src="i.user_avatar" class="avatar" />
                    </div>

                    <span>{{ i.user_nickname || "-" }}</span>
                </div>
                <div class="comment-bottom mt-10">
                    {{ i.msg || "-" }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        setComment,
        comment_list
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                avatar: ''
            };
        },
        props: {
            id: {
                type: [String, Number],
                default: "",
                required: true,
            },
            admin_id: {
                type: [String, Number],
                default: "",
                required: false,
            },
            // 评论后是否滚动到最新评论消息
            scorll: {
                type: Boolean,
                default: true,
            },
            // 类型 1=汇资讯,2=学才艺,3=赶大集,4=享活动,5=读好书,6=订场馆,7=品非遗
            type: {
                type: [String, Number],
                default: 1,
            },
        },
        created() {
            this.getList()
        },
        data() {
            return {
                pageSize: '',

                baseUrl: process.env.VUE_APP_BASE_API,
                content: "", // 评论内容
                total: 2322, // 评论总数
                commentList: [], // 评论列表
            };
        },

        mounted() {},

        methods: {
            getList() {
                let that = this
                let data = {
                    type_id: that.id,
                    type: that.type,
                    page: 1,
                    limit: 10,
                }
                comment_list(data).then((response) => {
                    that.commentList = response.data ? response.data.list : []
                    that.avatar = that.$store.state.userinfo.avatar
                });

            },
            // 提交评论
            handleSubmit() {
                let that = this
                setComment({
                    type: that.type,
                    msg: that.content,
                    type_id: that.id,
                    admin_id: that.admin_id,
                }).then((response) => {
                    if (response.code == 200) {
                        that.$message.success('提交成功，待审核');
                        that.content = ''
                        that.getList()
                    }

                });

                // if (!this.content) return;
                // this.$message.success("评论成功");
                // let msg = {
                //     id: this.commentList.length + 1,
                //     avatar: "https://pic.rmb.bdstatic.com/bjh/news/c72df6825624aa5710ed67c350fc922e.png",
                //     userName: "张三",
                //     content: this.content,
                // };
                // this.commentList.push(msg);
                // this.content = "";
                // this.$emit("comfirm", ++this.total);
                // if (this.scorll) {
                //     this.$nextTick(() => {
                //         this.scorrlView("comment" + msg.id);
                //     });
                // }
            },
            // 滚动到评论位置
            scorrlView(id) {
                console.log(id);
                let temp = document.getElementById(id);
                temp.scrollIntoView({
                    block: "start",
                    behavior: "smooth"
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .comment {
        width: 100%;

        &-title {
            color: #313131;
            font-size: 14px;

            span {
                color: #b6b6b6;
                font-size: 12px;
            }
        }

        &-box {
            padding-top: 20px;
            border-top: 1px solid #d9d9d9;
            padding-bottom: 40px;
            /* border-bottom: 1px solid #d9d9d9; */

            .comment-item {
                .comment-top {
                    color: #313131;
                    font-size: 14px;

                    .avatar {
                        width: 38px;
                        height: 38px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                }

                .comment-bottom {
                    color: #555;
                    font-size: 16px;
                    line-height: 20px;
                }
            }
        }
    }

    :deep(.el-textarea__inner) {
        border-radius: 0;
    }
</style>